<template>
  <el-card shadow="never">
    <div class="flex flex-col gap-2 bg-[var(--el-bg-color-overlay)] p-6">
      <div class="flex items-center justify-between text-gray-500">
        <span>{{ title }}</span>
        <el-tag>{{ tag }}</el-tag>
      </div>
      <div class="flex flex-row items-baseline justify-between">
        <CountTo :prefix="prefix" :end-val="value" :decimals="decimals" class="text-3xl" />
        <span :class="toNumber(percent) > 50 ? 'text-red-500' : 'text-green-500'">
          {{ toNumber(isNaN(percent) ? 50 : percent) }}%
        </span>
      </div>
      <el-divider class="mb-1! mt-2!" />
      <div class="flex flex-row items-center justify-between text-sm">
        <span class="text-gray-500">{{ referenceTag || '参照数据' }}</span>
        <span>{{ prefix || '' }}{{ Number(reference).toFixed(decimals) }}</span>
      </div>
    </div>
  </el-card>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { toNumber } from 'lodash-es'
import { calculatePercent } from '@/utils'

/** 交易对照卡片 */
defineOptions({ name: 'ComparisonCard' })

const props = defineProps({
  title: propTypes.string.def('').isRequired,
  tag: propTypes.string.def(''),
  referenceTag: propTypes.string.def(''),
  prefix: propTypes.string.def(''),
  value: propTypes.number.def(0).isRequired,
  reference: propTypes.number.def(0).isRequired,
  decimals: propTypes.number.def(0)
})

// 计算比率
const percent = computed(() => calculatePercent(props.value as number, props.reference as number))
</script>
